<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>登录</title>
    <link rel="stylesheet" href="./css/login.css" />
    <script src="./lib/jquery-1.12.2.js"></script>
    <!-- 需要使用引入第三方库进行md5加密 -->
    <script src="./lib/md5.min.js"></script>
  </head>

  <body>
    <div class="wraper">
      <div class="container">
        <div class="logo">
          <img class="icon" src="./images/logo.png" />
          <div class="title">英雄管理系统</div>
        </div>
        <div class="input-container">
          <div class="phone">
            <img class="icon" src="./images/phone.png" />
            <input placeholder="用户名" type="text" id="userName" name="userName" />
          </div>
          <div class="validate">
            <div class="code">
              <img class="icon" src="./images/mail.png" />
              <input placeholder="密码" type="password" id="userPwd" name="userPwd" />
            </div>
          </div>
        </div>
        <div id="tips"></div>
        <input onclick="login()" type="submit" class="btn" value="登录" />
      </div>
    </div>
  </body>
  <script>
  	// 你的代码
    function login () {
      // 用户登陆
	  // 面向接口编程
	  $.ajax({
		  url: 'http://localhost:3000/user/login',
		  method: 'POST',
		  data: {
			  userName: $('#userName').val().trim(),
			  userPwd: md5($('#userPwd').val().trim())
		  },
		  success: (res) => {
			  console.log('返回的结果是', res)
			  const {code} = res
			  if(code === 200) {
				  // 保存从后端传回的token
				  localStorage.setItem('token', res.token)
				  // 跳入主页
				  window.location.href = './index.html'
			  } else if(code === 201) {
				  alert('用户名密码有误')
			  } else {
				  alert(res.msg)
			  }
		  }
	  })
    }
  </script>
</html>